<template>
    <div>
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item
                v-for="item in content"
                :key="item.title"
                :title="item.title"
                :name="item.name"
                >{{ item.word }}</van-collapse-item
            >
        </van-collapse>
        <van-panel title="播放状态" desc="保持用户喜好" :status="this.getMsg">
            <template #footer>
                <van-button
                    size="small"
                    type="primary"
                    @click="markVideoPlayed({ isPlayed: true, count: 0 })"
                    >播放</van-button
                >
                &nbsp;
                <van-button
                    size="small"
                    type="warning"
                    @click="markVideoPlayed({ isPlayed: false, count: 1 })"
                    >停止</van-button
                >
            </template>
        </van-panel>
    </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    data() {
        return {
            content: [
                {
                    title: "代码提交",
                    name: "submit",
                    word: "git commit",
                },
                {
                    title: "版本回溯",
                    name: "reset",
                    word:
                        "提交一个文件，有时候我们会提交很多次，在提交历史中，这样就产生了不同的版本。",
                },
                {
                    title: "撤销",
                    name: "checkout",
                    word:
                        "在工作区时，你修改了一个东西，你想撤销修改，git checkout -- file",
                },
                {
                    title: "删除",
                    name: "git rm",
                    word:
                        '如果你git add一个文件到暂存区，然后在工作区又把文件删除了，Git会知道你删除了文件。如果你要把版本库里的文件删除，git rm 并且git commit -m "xxx".',
                },
            ],
            activeName: "1",
        };
    },
    computed: {
        ...mapState(["isPlayed", "count"]),
        ...mapGetters(["getPlayStatus", "getMsg"]),
    },
    mounted() {
        this.loadVideoStatus();
    },
    methods: {
        // 映射到当前Vue实例对象上，通过this关键字获取
        ...mapMutations(["markVideoPlayed"]),
        ...mapActions(["loadVideoStatus"]),
    },
};
</script>

<style></style>
